<script setup>
import { Search, Delete, Edit } from "@element-plus/icons-vue";
//import { useTobaccoStore, usePersistStore, userGroupStore } from "@/stores";
import { useTobaccoStore, usePersistStore } from "@/stores";
import { storeToRefs } from "pinia";
const tobaccoStore = useTobaccoStore();
const persistStore = usePersistStore();
//const groupStore = userGroupStore();
//const { groupTobaccoList, groupTobaccoTotal } = storeToRefs(groupStore);

const { tobaccoList, tobTotal, rfidAllList, rfidAvailableList, userInfo } =
  storeToRefs(persistStore);

const {
  queryData,
  commentVisible,
  infoChecked,
  drawerVisible,
  drawerTitle,
  addTitle,
  isAddTob,
  tobTable,
  detailInfo,
  addDrawerVisible,
  addTobaccoData,
  addForm,
  isSearch,
  uploadDraw,
  baseTableData,
  detailTableData,
  showTobaccoPlace,
  loading,
  rfidInfo,
  percentage,
} = storeToRefs(tobaccoStore);
const {
  tobSizeChange,
  tobPageChange,
  tobDelete,
  clearQueryData,
  clearAddData,
  changeComment,
  infoCheckedChange,
  closeDialog,
  replace,
  tobEdit,
  baseTobEdit,
  multipleChoice,
  searchByrfids,
  submitComment,
  submitQuery,
  submitEvent,
  submitAddTobacco,
  addTobacco,
  addTobaccRules,
  openUploadDraw,
  showUploadTable,
  delUpload,
  submitUpload,
  downLoadData,
  recordShort,
  gettobaccos,
  
} = tobaccoStore;
gettobaccos();
</script>

<template>
  <CardPage>
    <template #title>单料烟基本信息展示</template>
    <template #button>
      <div>
        <el-button type="primary" @click="searchByrfids" class="button"
          >查找</el-button
        >
        <!-- 模拟不足登记 -->
        <el-button
          type="primary"
          @click="recordShort"
          class="button"
          v-if="userInfo.job == 1"
          >不足登记</el-button
        >
        <el-button
          type="primary"
          v-if="userInfo.job === 1"
          class="button"
          @click="addTobacco"
          >添加</el-button
        >
        <el-button
          type="primary"
          v-if="userInfo.job === 1"
          class="button"
          @click="openUploadDraw"
          >导入</el-button
        >
        <el-button
          type="primary"
          class="button"
          v-if="userInfo.job === 1"
          @click="downLoadData"
          >导出</el-button
        >
      </div>
    </template>
    <!-- 单料烟条件搜索表单 -->
    <el-form :inline="true" class="demo-form-inline" :model="queryData">
      <el-form-item label="年份">
        <el-input type="number" v-model.number="queryData.year" />
      </el-form-item>
      <el-form-item label="产地">
        <el-input v-model="queryData.location" />
      </el-form-item>
      <el-form-item label="部位">
        <el-input v-model="queryData.part"></el-input>
      </el-form-item>
      <el-form-item label="评估状态">
        <el-select
          v-model="queryData.evaluate"
          style="width: 10vw"
          placeholder="请选择"
        >
          <el-option label="未评估" :value="0" />
          <el-option label="已评估" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="button" type="primary" @click="submitQuery"
          >搜索</el-button
        >
        <el-button class="button" @click="clearQueryData">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 管理员单料烟基本信息展示表格 -->
    <el-table
      :data="tobaccoList"
      @selection-change="multipleChoice"
      v-if="userInfo.job === 1"
      border
      stripe
      style="width: 80%; height: 25vw; margin-top: 1vw"
      size="small"
      ref="tobTable"
      v-loading="loading"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column label="RFid号" width="150">
        <template #default="scope">
          <span v-for="item in rfidAllList">
            {{ scope.row.rfid == item.value ? item.value : "" }}
            <el-badge
              is-dot
              class="item"
              :type="item.state == 0 ? 'success' : 'danger'"
              v-if="item.value == scope.row.rfid"
              style="margin-left: 3vw"
            >
            </el-badge>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产地" width="100" prop="location">
      </el-table-column>
      <el-table-column label="年份" width="80" prop="year"> </el-table-column>
      <el-table-column label="部位" width="80" prop="part"> </el-table-column>
      <el-table-column label="名称" width="150" prop="name"> </el-table-column>
      <el-table-column label="评估状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.evaluate === 0">否</span>
          <span v-else-if="scope.row.evaluate === 1">是</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150">
        <template #default="scope">
          <span>{{ scope.row.info }}</span>
          <el-button
            circle
            plain
            :icon="Edit"
            size="small"
            type="primary"
            @click="changeComment(scope.row)"
            style="float: right"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="基本信息">
        <template #default="scope">
          <el-button
            :icon="Edit"
            circle
            plain
            size="large"
            type="primary"
            @click="baseTobEdit(scope.$index, scope.row)"
          >
          </el-button>
          <el-button
            size="large"
            type="danger"
            :icon="Delete"
            circle
            plain
            @click="tobDelete(scope.$index, scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="详细信息">
        <template #default="scope">
          <el-popover
            placement="top-start"
            title="未评价,无法推荐"
            :width="200"
            trigger="hover"
            :icon="Search"
            v-if="scope.row.evaluate === 0"
          >
            <template #reference>
              <el-button
                :disabled="scope.row.evaluate === 0"
                :icon="Search"
                size="large"
                type="primary"
                circle
                plain
                @click="replace(scope.$index, scope.row)"
              >
              </el-button>
            </template>
          </el-popover>
          <el-button
            v-if="scope.row.evaluate === 1"
            :icon="Search"
            size="large"
            type="primary"
            circle
            plain
            @click="replace(scope.$index, scope.row)"
          >
          </el-button>
          <el-button
            :icon="Edit"
            circle
            plain
            size="large"
            type="primary"
            @click="tobEdit(scope.$index, scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>

    <!-- 普通员工单料烟基本信息展示表格 -->
    <el-table
      :data="tobaccoList"
      @selection-change="multipleChoice"
      v-if="userInfo.job === 2"
      border
      stripe
      style="width: 65%; height: 25vw; margin-top: 1vw"
      size="small"
      ref="tobTable"
      v-loading="loading"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column label="RFid号" width="150">
        <template #default="scope">
          <span v-for="item in rfidAllList">
            {{ scope.row.rfid == item.value ? item.value : "" }}
            <el-badge
              is-dot
              class="item"
              :type="item.state == 0 ? 'success' : 'danger'"
              v-if="item.value == scope.row.rfid"
              style="margin-left: 3vw"
            >
            </el-badge>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产地" width="100" prop="location">
      </el-table-column>
      <el-table-column label="年份" width="80" prop="year"> </el-table-column>
      <el-table-column label="部位" width="80" prop="part"> </el-table-column>
      <el-table-column label="名称" width="150" prop="name"> </el-table-column>
      <el-table-column label="评估状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.evaluate === 0">否</span>
          <span v-else-if="scope.row.evaluate === 1">是</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150" prop="info"> </el-table-column>
      <el-table-column label="样品推荐">
        <template #default="scope">
          <el-popover
            placement="top-start"
            title="未评价,无法推荐"
            :width="200"
            trigger="hover"
            :icon="Search"
            v-if="scope.row.evaluate === 0"
          >
            <template #reference>
              <el-button
                :disabled="scope.row.evaluate === 0"
                :icon="Search"
                size="large"
                type="primary"
                circle
                plain
                @click="replace(scope.$index, scope.row)"
              >
              </el-button>
            </template>
          </el-popover>
          <el-button
            v-if="scope.row.evaluate === 1"
            :icon="Search"
            size="large"
            type="primary"
            circle
            plain
            @click="replace(scope.$index, scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>

    <!-- 分页条 -->
    <div class="pagination">
      <el-pagination
        v-show="!groupTobaccoTotal > 0"
        v-model:current-page="queryData.page"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[3, 5, 7, 10]"
        background
        layout="sizes, prev, pager, next, jumper,total"
        :total="groupTobaccoTotal > 0 ? groupTobaccoTotal : tobTotal"
        @size-change="tobSizeChange"
        @current-change="tobPageChange"
      />
    </div>

    <!-- 单料烟备注修改的弹窗 -->
    <el-dialog v-model="commentVisible" title="修改备注" width="500">
      <el-checkbox-group
        style="display: flex; justify-content: space-around"
        v-model="infoChecked"
        @change="infoCheckedChange"
      >
        <el-checkbox label="异味" value="异味" size="large" border>
        </el-checkbox>
        <el-checkbox label="霉变" value="霉变" size="large" border>
        </el-checkbox>
        <el-checkbox label="生虫" value="生虫" size="large" border>
        </el-checkbox>
        <el-checkbox label="不足" value="不足" size="large" border>
        </el-checkbox>
      </el-checkbox-group>

      <template #footer>
        <div class="dialog-footer">
          <el-button class="button" @click="closeDialog">取消</el-button>
          <el-button class="button" @click="submitComment" type="primary">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 单料烟的详细信息编辑和搜索的抽屉组件 -->
    <el-drawer v-model="drawerVisible" size="75%">
      <CardPage>
        <template #title>{{ drawerTitle }}</template>
        <template #button>
          <el-button type="primary" class="button" @click="submitEvent"
            >提交</el-button
          >
        </template>
        <el-form
          id="detail"
          :model="detailInfo"
          style="background-color: #d5ecd0"
        >
          <table border="1">
            <tr>
              <!-- <td width="150">项目</td> -->
              <td colspan="16" style="background-color: #499533; color: white">
                风格特征
              </td>
            </tr>
            <tr>
              <!-- <td rowspan="3">指标</td> -->
              <td colspan="9">香韵</td>
              <td>香气状态</td>
              <td colspan="2">香型</td>
              <td colspan="4">烟气</td>
            </tr>
            <tr>
              <td>干草香</td>
              <td>清甜香</td>
              <td>正甜香</td>
              <td>焦甜香</td>
              <td>青香</td>
              <td>木香</td>
              <td>焦香</td>
              <td>辛香</td>
              <td>丰富度</td>
              <td rowspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.fragranceState"
                  ></el-input
                ></el-form-item>
              </td>
              <td>类型</td>
              <td>程度</td>
              <td>浓度</td>
              <td>劲头</td>
              <td>流畅</td>
              <td>绵长</td>
            </tr>
            <tr>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.ganCaoFragrant"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.qingTianFragrant"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.zhengTianFragrant"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.jiaoTianFragrant"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.qingFragrant"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.muFragrant"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.jiaoFragrant"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.xinFragrant"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.richness"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input v-model="detailInfo.fragranceType"></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.FragranceDegree"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.concentration"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.energy"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.fluency"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.mianChang"
                  ></el-input
                ></el-form-item>
              </td>
            </tr>
            <tr>
              <!-- <td>项目</td> -->
              <td colspan="16" style="background-color: #499533; color: white">
                品质特征
              </td>
            </tr>
            <tr>
              <!-- <td rowspan="4">指标</td> -->
              <td colspan="5">香气</td>
              <td colspan="3">烟气</td>
              <td colspan="8">口感</td>
            </tr>
            <tr>
              <td>香气质</td>
              <td>香气量</td>
              <td>透发性</td>
              <td colspan="2">杂气</td>
              <td>细腻程度</td>
              <td>柔和程度</td>
              <td>圆润感</td>
              <td colspan="2">刺激感</td>
              <td colspan="3">余味</td>
              <td>干燥感</td>
              <td colspan="2">甜度</td>
            </tr>
            <tr>
              <td rowspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.fragranceQuality"
                  ></el-input
                ></el-form-item>
              </td>
              <td rowspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.fragranceQuantity"
                  ></el-input
                ></el-form-item>
              </td>
              <td rowspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.penetrability"
                  ></el-input
                ></el-form-item>
              </td>
              <td>程度</td>
              <td>种类</td>
              <td rowspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.exquisiteDegree"
                  ></el-input
                ></el-form-item>
              </td>
              <td rowspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.softDegree"
                  ></el-input
                ></el-form-item>
              </td>
              <td rowspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.roundFeeling"
                  ></el-input
                ></el-form-item>
              </td>
              <td>程度</td>
              <td>部位</td>
              <td>干净程度</td>
              <td>不适类型</td>
              <td>不适部位</td>
              <td rowspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.dryFeeling"
                  ></el-input
                ></el-form-item>
              </td>
              <td rowspan="2" colspan="2">
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.sweetDegree"
                  ></el-input
                ></el-form-item>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.zaQiDegree"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input v-model="detailInfo.zaQiType"></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.stimulateDegree"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input v-model="detailInfo.stimulatePart"></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input
                    type="number"
                    :min="1"
                    :max="9"
                    :step="0.1"
                    v-model="detailInfo.clearDegree"
                  ></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input v-model="detailInfo.discomfortType"></el-input
                ></el-form-item>
              </td>
              <td>
                <el-form-item
                  ><el-input v-model="detailInfo.discomfortPart"></el-input
                ></el-form-item>
              </td>
            </tr>
            <tr>
              <!-- <td>项目</td> -->
              <td colspan="16" style="background-color: #499533; color: white">
                功能定位
              </td>
            </tr>
            <tr>
              <!-- <td rowspan="2"></td> -->
              <td colspan="4">价类</td>
              <td colspan="4">功能</td>
              <td colspan="4">品牌</td>
              <td colspan="4">品类</td>
            </tr>
            <tr>
              <td colspan="4">
                <el-form-item
                  ><el-input v-model="detailInfo.priceType"></el-input
                ></el-form-item>
              </td>
              <td colspan="4">
                <el-form-item
                  ><el-input v-model="detailInfo.isFunction"></el-input
                ></el-form-item>
              </td>
              <td colspan="4">
                <el-form-item
                  ><el-input v-model="detailInfo.brand"></el-input
                ></el-form-item>
              </td>
              <td colspan="4">
                <el-form-item
                  ><el-input v-model="detailInfo.category"></el-input
                ></el-form-item>
              </td>
            </tr>
            <tr v-show="isSearch">
              <td colspan="16" style="background-color: #499533; color: white">
                优先级选择
              </td>
            </tr>
            <tr v-show="isSearch">
              <td colspan="8">第一优先级</td>
              <td colspan="8">第二优先级</td>
            </tr>
            <tr v-show="isSearch">
              <td colspan="8">
                <el-select
                  v-model="detailInfo.priority[0]"
                  placeholder="请选择第一优先级"
                  size="large"
                >
                  <el-option label="香韵" value="smellcharm" />
                  <el-option label="香气状态" value="smellstate" />
                  <el-option label="香型" value="smelltype" />
                  <el-option label="烟气(风格)" value="smoke1" />
                  <el-option label="香气" value="smell" />
                  <el-option label="烟气(品质)" value="smoke2" />
                  <el-option label="口感" value="taste" />
                </el-select>
              </td>
              <td colspan="8">
                <el-select
                  v-model="detailInfo.priority[1]"
                  placeholder="请选择第二优先级"
                  size="large"
                >
                  <el-option label="香韵" value="smellcharm" />
                  <el-option label="香气状态" value="smellstate" />
                  <el-option label="香型" value="smelltype" />
                  <el-option label="烟气(风格)" value="smoke1" />
                  <el-option label="香气" value="smell" />
                  <el-option label="烟气(品质)" value="smoke2" />
                  <el-option label="口感" value="taste" />
                </el-select>
              </td>
            </tr>
          </table>
        </el-form>
      </CardPage>
    </el-drawer>
    <!-- 单条单料烟添加和基本信息编辑的抽屉组件 -->
    <el-drawer v-model="addDrawerVisible" size="50%">
      <CardPage>
        <template #title>{{ addTitle }}</template>
        <el-form
          id="addForm"
          ref="addForm"
          label-width="5vw"
          :model="addTobaccoData"
          :rules="addTobaccRules"
        >
          <el-form-item label="id" prop="id">
            <el-input
              v-model.tirm="addTobaccoData.id"
              placeholder="请输入单料烟id"
              :disabled="!isAddTob"
            ></el-input>
          </el-form-item>
          <el-form-item label="rfid号" prop="rfid">
            <el-select
              v-model="addTobaccoData.rfid"
              placeholder="请选择"
              :disabled="!isAddTob"
            >
              <el-option
                v-for="item in rfidAvailableList"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input
              v-model.tirm="addTobaccoData.name"
              placeholder="请输入单料烟名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="产地" prop="location"
            ><el-input
              placeholder="请输入产地"
              v-model.tirm="addTobaccoData.location"
            >
            </el-input
          ></el-form-item>
          <el-form-item label="年份" prop="year"
            ><el-input
              placeholder="请输入年份"
              v-model.number="addTobaccoData.year"
            >
            </el-input
          ></el-form-item>
          <el-form-item label="部位" prop="part"
            ><el-input
              placeholder="请输入部位"
              v-model.tirm="addTobaccoData.part"
            >
            </el-input
          ></el-form-item>
          <el-form-item label="评估状态" prop="evaluate">
            <el-select
              placeholder="请选择评估状态"
              v-model="addTobaccoData.evaluate"
            >
              <el-option label="已评估" :value="1" />
              <el-option label="未评估" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注"
            ><el-checkbox-group
              style="width: 50%; display: flex; justify-content: space-around"
              v-model="infoChecked"
              @change="infoCheckedChange"
            >
              <el-checkbox label="异味" value="异味" border> </el-checkbox>
              <el-checkbox label="霉变" value="霉变" border> </el-checkbox>
              <el-checkbox label="生虫" value="生虫" border> </el-checkbox>
              <el-checkbox label="不足" value="不足" border> </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div id="button">
          <el-button type="primary" @click="submitAddTobacco">提交</el-button>
          <el-button type="primary" @click="clearAddData">清空</el-button>
        </div>
      </CardPage>
    </el-drawer>

    <!-- 单料烟搜索位置显示的弹窗 -->
    <el-drawer v-model="showTobaccoPlace" style="font-size: 0.25rem" size="50%">
      <CardPage>
        <template #title
          >单料烟大概位置展示表(x,y坐标之后将会转化成XXX柜子)</template
        >
        <el-table :data="rfidInfo" border stripe>
          <el-table-column
            type="index"
            width="70"
            label="序号"
            style="height: 25vw; margin-top: 1vw"
          ></el-table-column>
          <el-table-column label="实验室" prop="location"></el-table-column>
          <el-table-column label="x坐标" prop="x"></el-table-column>
          <el-table-column label="y坐标" prop="y"></el-table-column>
        </el-table>
      </CardPage>
    </el-drawer>
    <!-- 单料烟导入的抽屉 -->
    <el-drawer v-model="uploadDraw" size="100%">
      <CardPage>
        <template #title>{{ drawerTitle }}</template>
        <template #button>
          <el-button class="uploadBtn" type="primary" @click="submitUpload"
            >上传文件</el-button
          ></template
        >
        <el-upload
          action
          accept=".xlsx,.xls"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="showUploadTable"
        >
          <template #trigger>
            <el-button type="primary" class="uploadBtn">选择文件</el-button>
          </template>
          <el-button type="danger" class="uploadBtn" @click="delUpload"
            >删除文件</el-button
          >
          <el-progress
            style="float: right"
            type="circle"
            :percentage="percentage"
          ></el-progress>
          <template #tip>
            <el-table
              :data="detailTableData"
              size="small"
              stripe
              style="width: 90%; height: 5rem; margin: 0.5rem"
              border
              v-if="detailTableData.length"
            >
              <el-table-column prop="column1" label="序号"></el-table-column>
              <el-table-column prop="column2" label="rfid号"></el-table-column>
              <el-table-column
                prop="column3"
                width="120"
                label="物料号"
              ></el-table-column>
              <el-table-column
                prop="column4"
                width="120"
                label="批次"
              ></el-table-column>
              <el-table-column
                prop="column5"
                label="物料描述"
                width="400"
              ></el-table-column>
              <el-table-column
                prop="column6"
                label="等级类别"
              ></el-table-column>
              <el-table-column prop="column7" label="甘草香"></el-table-column>
              <el-table-column prop="column8" label="清甜香"></el-table-column>
              <el-table-column prop="column9" label="正甜香"></el-table-column>
              <el-table-column prop="column10" label="焦甜香"></el-table-column>
              <el-table-column prop="column11" label="青香"></el-table-column>
              <el-table-column prop="column12" label="木香"></el-table-column>
              <el-table-column prop="column13" label="焦香"></el-table-column>
              <el-table-column prop="column14" label="辛香"></el-table-column>
              <el-table-column prop="column15" label="丰富度"></el-table-column>
              <el-table-column
                prop="column16"
                label="香气状态"
              ></el-table-column>
              <el-table-column
                prop="column17"
                label="香型类型"
              ></el-table-column>
              <el-table-column
                prop="column18"
                label="香型程度"
              ></el-table-column>
              <el-table-column prop="column19" label="浓度"></el-table-column>
              <el-table-column prop="column20" label="劲头"></el-table-column>
              <el-table-column prop="column21" label="流畅"></el-table-column>
              <el-table-column prop="column22" label="绵长"></el-table-column>
              <el-table-column prop="column23" label="香气质"></el-table-column>
              <el-table-column prop="column24" label="香气量"></el-table-column>
              <el-table-column prop="column25" label="透发性"></el-table-column>
              <el-table-column
                prop="column26"
                label="杂气程度"
              ></el-table-column>
              <el-table-column
                prop="column27"
                label="杂气种类"
              ></el-table-column>
              <el-table-column
                prop="column28"
                label="细腻程度"
              ></el-table-column>
              <el-table-column
                prop="column29"
                label="柔和程度"
              ></el-table-column>
              <el-table-column prop="column30" label="圆润感"></el-table-column>
              <el-table-column
                prop="column31"
                label="刺激程度"
              ></el-table-column>
              <el-table-column
                prop="column32"
                label="刺激部位"
              ></el-table-column>
              <el-table-column
                prop="column33"
                label="干净程度"
              ></el-table-column>
              <el-table-column
                prop="column34"
                label="不适类型"
              ></el-table-column>
              <el-table-column
                prop="column35"
                label="不适部位"
              ></el-table-column>
              <el-table-column prop="column36" label="干燥感"></el-table-column>
              <el-table-column prop="column37" label="甜度"></el-table-column>
              <el-table-column prop="column38" label="价类"></el-table-column>
              <el-table-column prop="column39" label="功能"></el-table-column>
              <el-table-column prop="column40" label="品牌"></el-table-column>
              <el-table-column prop="column41" label="品类"></el-table-column>
              <template #empty>
                <el-empty description="没有数据" />
              </template>
            </el-table>
            <el-table
              :data="detailTableData"
              size="small"
              stripe
              style="width: 95%; height: 7rem; margin: 0.5rem"
              border
              v-if="false"
            >
              <el-table-column prop="column1" label="序号"></el-table-column>
              <el-table-column prop="column2" label="rfid号"></el-table-column>
              <el-table-column
                prop="column3"
                width="120"
                label="物料号"
              ></el-table-column>
              <el-table-column
                prop="column4"
                width="120"
                label="批次"
              ></el-table-column>
              <el-table-column
                prop="column5"
                label="物料描述"
                width="400"
              ></el-table-column>
              <el-table-column
                prop="column6"
                label="等级类别"
              ></el-table-column>
              <el-table-column prop="column7" label="甘草香"></el-table-column>
              <el-table-column prop="column8" label="清甜香"></el-table-column>
              <el-table-column prop="column9" label="正甜香"></el-table-column>
              <el-table-column prop="column10" label="焦甜香"></el-table-column>
              <el-table-column prop="column11" label="青香"></el-table-column>
              <el-table-column prop="column12" label="木香"></el-table-column>
              <el-table-column prop="column13" label="焦香"></el-table-column>
              <el-table-column prop="column14" label="辛香"></el-table-column>
              <el-table-column prop="column15" label="丰富度"></el-table-column>
              <el-table-column
                prop="column16"
                label="香气状态"
              ></el-table-column>
              <el-table-column
                prop="column17"
                label="香型类型"
              ></el-table-column>
              <el-table-column
                prop="column18"
                label="香型程度"
              ></el-table-column>
              <el-table-column prop="column19" label="浓度"></el-table-column>
              <el-table-column prop="column20" label="劲头"></el-table-column>
              <el-table-column prop="column21" label="流畅"></el-table-column>
              <el-table-column prop="column22" label="绵长"></el-table-column>
              <el-table-column prop="column23" label="香气质"></el-table-column>
              <el-table-column prop="column24" label="香气量"></el-table-column>
              <el-table-column prop="column25" label="透发性"></el-table-column>
              <el-table-column
                prop="column26"
                label="杂气程度"
              ></el-table-column>
              <el-table-column
                prop="column27"
                label="杂气种类"
              ></el-table-column>
              <el-table-column
                prop="column28"
                label="细腻程度"
              ></el-table-column>
              <el-table-column
                prop="column29"
                label="柔和程度"
              ></el-table-column>
              <el-table-column prop="column30" label="圆润感"></el-table-column>
              <el-table-column
                prop="column31"
                label="刺激程度"
              ></el-table-column>
              <el-table-column
                prop="column32"
                label="刺激部位"
              ></el-table-column>
              <el-table-column
                prop="column33"
                label="干净程度"
              ></el-table-column>
              <el-table-column
                prop="column34"
                label="不适类型"
              ></el-table-column>
              <el-table-column
                prop="column35"
                label="不适部位"
              ></el-table-column>
              <el-table-column prop="column36" label="干燥感"></el-table-column>
              <el-table-column prop="column37" label="甜度"></el-table-column>
              <el-table-column prop="column38" label="价类"></el-table-column>
              <el-table-column prop="column39" label="功能"></el-table-column>
              <el-table-column prop="column40" label="品牌"></el-table-column>
              <el-table-column prop="column41" label="品类"></el-table-column>
              <template #empty>
                <el-empty description="没有数据" />
              </template>
            </el-table>
          </template>
        </el-upload>
      </CardPage>
    </el-drawer>
  </CardPage>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.button {
  width: 0.875rem;
  font-size: 0.1875rem;
  /* background-color: pink; */
}
.uploadBtn {
  width: 0.875rem;
  font-size: 0.1875rem;
  margin-left: 2vw;
}

.pagination {
  width: 10rem;
  margin: 1rem 8rem;
}
.pagination .el-pagination {
  width: 100%;
  height: 100%;
}
table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  margin-top: 0.25rem;
  font-size: 0.225rem;
}
table td {
  width: 1vw;
}
#detail .el-input {
  font-size: 1vw;
}
#addForm {
  margin-top: 3vw;
}
#addForm .el-form-item {
  margin-top: 1vw;
}
#button {
  width: 8vw;
  margin: 3vw;
  display: flex;
  justify-content: space-between;
}
#button .el-button {
  width: 3vw;
}
</style>
